$(function () {
  var arr = [];

  //  1 点击搜索进行页面跳转 search_list 并且 进行数据获取 而且需要携带参数 点击的时候把数据存储到本地缓存
  // 点击的时候
  // 1.1 获取输入框的数据
  // 1.2 把数据放到 arr =[] 数组里面   把arr 存储到本地缓存里面
  // 1.3  实现页面的跳转
  $(".searchBtn").on("tap", function () {
    // alert(111)
    var txt = $(".searchTxt").val().trim();
    if (!txt) return alert("请输入要搜索的内容");

    arr.unshift(txt);

    localStorage.setItem("search", JSON.stringify(arr));

    $(".searchTxt").val('')
    window.location.href = `./search-list.html?key=${txt}`;
  });

  //  2 一进入页面会有历史记录展示  数据的存储

  // var arr=[1,2,3];  // 存储的数据
  // var str=1;


//   localStorage.setItem("search", JSON.stringify(arr));

// 保证每次都能把之前的值存到之前的空数组里面
  arr = JSON.parse(localStorage.getItem("search"))  ||  [];

  console.log(arr);

  var obj = {
    arrData: arr,
  };

  var htmlList = template("tmp", obj);

  console.log(htmlList);
  $(".historyList>ul").html(htmlList);

  //  3  点击清空 历史记录进行数据清除
  $(".clearHistory").on("tap", ".mui-icon-trash", function () {
    // alert(1)

    localStorage.clear();
    var getSearchData = JSON.parse(localStorage.getItem("search")) || [];
    console.log(getSearchData);

    var obj = {
      arrData: getSearchData,
    };
    var htmlList = template("tmp", obj);

    $(".historyList>ul").html(htmlList);
  });
});
